<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:f="http://java.sun.com/jsf/core"
                template="/templates/mainLayout.xhtml">

    <ui:define name="title">#{registerMsg['title']}</ui:define>
    <ui:define name="idleMonitor">
        <h:form id="monitorForm" prependId="false">
            <p:idleMonitor timeout="#{registerBean.conversation.getTimeout()}" onidle="idleDialog.show();" 
                           onactive='window.location = "changepass.vfs";' rendered="#{!registerBean.conversation.isTransient()}"/>

            <p:dialog header="Thông báo" resizable="false" widgetVar="idleDialog" modal="true" width="400">
                <h:outputText value="Phiên làm việc trên trang này đã hết hạn" />
            </p:dialog>
        </h:form>
    </ui:define>
    <ui:define name="content">
        <h:form id="contentForm">
            <p:panel header="#{registerMsg['register']}" style="width: 60%; margin-top: 10px; margin-left: auto; margin-right: auto;">
                <p:messages id="msgs"/>
                <h:panelGrid styleClass="panelGrid" columnClasses="ui-state-default labelCol, ui-widget-content" 
                             columns="2" cellpadding="5" width="100%">
                    <h:outputLabel for="username" style="display: inline; float: right; padding-right: 5px;" value="#{registerMsg['username']} *" />  
                    <p:inputText value="#{registerBean.username}" id="username" required="true" label="#{registerMsg['username']}" size="25" maxlength="50"
                                 requiredMessage="#{registerMsg['msg.usernameIsRequired']}"/>
                    
                    <h:outputLabel for="email" style="display: inline; float: right; padding-right: 5px;" value="#{registerMsg['email']} *" />  
                    <p:inputText value="#{registerBean.email}" id="email" required="true" label="#{registerMsg['email']}" size="25" maxlength="50"
                                 requiredMessage="#{registerMsg['msg.emailIsRequired']}"/>
                    
                    <h:outputLabel for="fullName" style="display: inline; float: right; padding-right: 5px;" value="#{registerMsg['fullname']}" />  
                    <p:inputText value="#{registerBean.fullName}" id="fullName" label="#{registerMsg['fullname']}" size="50" maxlength="100"/>

                    <h:outputLabel for="password" style="display: inline; float: right; padding-right: 5px;" value="#{registerMsg['password']} *" />
                    <p:password id="password" value="#{registerBean.password}" required="true" label="#{registerMsg['password']}" size="25" maxlength="50"
                                requiredMessage="#{registerMsg['msg.passwordIsRequired']}"/>
                    
                    <h:outputLabel for="retypepassword" style="display: inline; float: right; padding-right: 5px;" value="#{registerMsg['retypepassword']} *" />
                    <p:password id="retypepassword" value="#{registerBean.reTypePassword}" required="true" label="#{registerMsg['retypepassword']}" size="25" maxlength="50"
                                requiredMessage="#{registerMsg['msg.retypePasswordIsRequired']}"/>
                    
                    <h:outputText value=""/>
                    <p:commandButton id="bRegister" value="#{registerMsg['register']}" ajax="false" action="#{registerBean.registerAction()}"/>
                </h:panelGrid>
            </p:panel>
        </h:form>
    </ui:define>
</ui:composition>